<template>
  <div>
    <div style="height:140px">
      <title1></title1>

      <!--头部面包屑-->
      <div
        class="breadCrumbBox flexCenter"
        ref="logoTop"
        style="position: fixed;top: 100px;z-index:99"
      >
        <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item v-if="projectFlag">
              <router-link :to="projectDetails">{{this.projectName2}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>
              <router-link :to="fuConstruction">{{this.laborName2}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>
              <router-link :to="laborUnit">{{this.wageInfo.labourOrgName}}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>{{this.wageInfo.teamName}}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </div>
    </div>

    <div class="salaryDetailsBox flexBetween">
      <div class="salaryLogoBox">
        <img style="width: 100%;height:100%;" src="../../assets/gongzidan.jpg" alt />
      </div>
      <div class="unitDetailsBox">
        <p class="payrollTitle">{{this.wageInfo.wageMonth+''+this.wageInfo.teamName}}工资单</p>
        <div class="payrollDetailBox">
          <div>
            <span>
              班组：
              <router-link :to="teamGroup">{{this.wageInfo.teamName}}</router-link>
            </span>
            <span>
              劳务单位：
              <router-link :to="laborUnit">{{this.wageInfo.labourOrgName}}</router-link>
            </span>
            <span>工资月份：{{this.wageInfo.wageMonth}}</span>
          </div>
          <div>
            <span>填报日期：{{this.wageInfo.createDate}}</span>
            <span>实发日期：{{this.wageInfo.payDate}}</span>
            <span>发放人数：{{this.wageInfo.personTotal}}</span>
          </div>
          <div class="flexStart" style="font-size:15px;color:#333">
            <div class="topInfoCell">发放总额：{{this.wageInfo.wageTotal}}元</div>
            <div class="topInfoCell flexStart">
              <div>工资确认单：</div>
              <div style="width:200px">
                <div
                  style="color: #2F80ED;cursor: pointer;margin-bottom:5px"
                  @click="pdfView(item.fileUrl)"
                  v-for="(item,index) in wageConfirmData"
                  :key="index"
                >{{item.fileName}}</div>
              </div>
            </div>
            <div class="topInfoCell flexStart">
              <div>银行支付凭证：</div>
              <div style="width:200px">
                <div
                  style="color: #2F80ED;cursor: pointer;margin-bottom:5px"
                  @click="pdfView(item.fileUrl)"
                  v-for="(item,index) in payBankData"
                  :key="index"
                >{{item.fileName}}</div>
              </div>
            </div>
          </div>
          <!-- <div>
           
          </div>
          <div>
           
          </div>-->
        </div>
      </div>
    </div>
    <div style="width:100%;position:relative;min-height:472px;padding-bottom:10px">
      <div class="payrollBox">
        <div class="titleBox flexBetween flexAlignCenter">
          <div class="payrollTitle">工资清单</div>
          <div>
            <a-input-search placeholder="请输入姓名查询" style="width: 250px" @search="onSearch" />
          </div>
        </div>
        <div class="payrollTableBox" style="margin-top: 30px;margin-bottom:100px">
          <a-table :columns="columns" :data-source="this.wageInfo.teamPersonWageVOList" :pagination="false">
            <div
              style="color:#1492ff;cursor:pointer"
              slot="name"
              slot-scope="text,record"
              @click="people_info(record)"
            >{{ text }}</div>
            <a
              slot="signUrl"
              slot-scope="text,record"
              v-if="record.signType==1"
              @click="signImgClicksign(record.signUrl)"
            >
              <!-- 照片旋转270度 -->
              <div style="height:30px;" class="flexCenter2">
                <img :src="record.signUrl" alt width="30px" style="transform: rotate(270deg);" />
              </div>
            </a>
            <div
              style="color:#1492ff;cursor:pointer"
              slot="signUrL"
              slot-scope="text,record"
              v-else
              @click="signShow(record.fileInfoList)"
            >
              <span v-if="record.fileInfoList" @click="signShow(record.fileInfoList)">签字照片</span>
              <span v-else @click="noImg">签字照片</span>
            </div>
          </a-table>
        </div>
      </div>
      <div style="position:absolute;bottom:0;width:100%">
        <supportCompany></supportCompany>
      </div>
    </div>

    <!-- pdf对话框 -->
    <div>
      <a-modal
        v-model="visible"
        title
        @ok="handleOkPdf"
        :footer="null"
        :maskClosable="false"
        width="1080px"
        :centered="true"
        :bodyStyle="{textAlign:'center'}"
        v-if="visible"
        key="modalpdf"
      >
        <embed width="1000" height="700" :src="this.pdfUrl" type />
      </a-modal>
    </div>

    <!-- 展示签字照片对话框 -->
    <div class="signImgModal">
      <a-modal
        v-model="visibleImg"
        title="签字照片"
        @ok="handleOkImg"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="800px"
      >
        <div style="padding-left:38px">
          <viewer :images="this.signData" class="flexBetween" style="flex-wrap:wrap">
            <div v-for="(src,index) in this.signData" :key="index" style="margin-right:38px">
              <img :src="src" width="200px" height="200px" />
            </div>
          </viewer>
        </div>
      </a-modal>
    </div>

    <!-- 展示图片签字对话框 -->
    <div class="amodal">
      <a-modal
        v-model="visibleImgsign"
        title="签字照片"
        @ok="handleOkImgsign"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
        width="800px"
      >
        <!-- 照片旋转270度 -->
        <div style="transform: rotate(270deg);height:400px" class="flexCenter2">
          <img :src="this.signImgDatasign" alt width="400px" height="800px" />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
const columns = [
  //   {
  //     title: '序号',
  //     dataIndex: 'no',
  //     key: 'no'
  //   },
  {
    title: '姓名',
    dataIndex: 'fullName',
    key: 'name',
    scopedSlots: { customRender: 'name' },
    align: 'center'
  },
  {
    title: '岗位',
    dataIndex: 'post',
    key: 'post',
    align: 'center'
  },

  {
    title: '身份证号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'center'
  },
  {
    title: '进场时间',
    dataIndex: 'inTime',
    key: 'inTime',
    align: 'center'
  },
  {
    title: '薪酬方式',
    dataIndex: 'contractType',
    key: 'contractType',
    align: 'center'
  },
  {
    title: '合同工资',
    dataIndex: 'contractWage',
    key: 'contractWage',
    align: 'center'
  },
  {
    title: '出勤天数',
    dataIndex: 'workDays',
    key: 'workDays',
    align: 'center'
  },
  {
    title: '实发工资',
    dataIndex: 'payWage',
    key: 'payWage',
    align: 'center'
  },
  {
    title: '签字照片',
    key: 'signUrl',
    scopedSlots: { customRender: 'signUrl' },
    align: 'center'
  }
]
const data = [
  {
    key: '1',
    no: '1',
    name: '孟瑞迪',
    post: '叉车驾驶员',
    idNumber: '412*****6122',
    entryTime: '2020-12-01',
    contractSalary: '6000',
    attendanceDays: '24',
    netSalary: '6000'
  }
]
import title1 from '@/views/title/index.vue'
import supportCompany from '@/views/supportCompany/index.vue'
import { queryTeamWage } from '@/api/personDetail'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  mounted() {
    window.scrollTo(0, 0)
    this.peopleId = this.$route.query.peopleId
    this.teamId = this.$route.query.teamId
    this.yearMonth = this.$route.query.yearMonth
    if (sessionStorage.getItem('imgdata')) {
      this.projectName2 = JSON.parse(sessionStorage.getItem('imgdata')).fullName
    }
    this.laborName2 = sessionStorage.getItem('laborName')
    this.getWage()
    // console.log( this.teamId);
  },
  components: {
    title1,
    supportCompany
  },
  computed: {
    ...mapGetters(['userInfo'])
  },

  data() {
    return {
      projectDetails: '/projectDetails',
      fuConstruction: '/fu/construction',
      laborUnit: '/laborUnit',
      teamGroup: '/teamGroup',
      columns,
      data: [],
      visible: false,
      yearMonth: '',
      teamId: '',
      peopleId: '',
      wageInfo: {},
      projectName2: '',
      laborName2: '',
      wageConfirmUrl: '',
      wageConfirm: '',
      wageConfirmData: [],
      payBankData: [],
      payBankUrl: '',
      payBank: '',
      pdfUrl: '',
      homeFlag: JSON.parse(sessionStorage.getItem('homeFlag')),
      projectFlag: JSON.parse(sessionStorage.getItem('projectFlag')),
      visibleImg: false,
      signData: [],
      signImgDatasign: [],
      visibleImgsign: false
    }
  },
  methods: {
    moment,
    handleOkPdf() {
      this.visible = false
    },
    pdfView(url) {
      this.pdfUrl = url
      this.visible = true
    },
    goPerson() {
      this.$router.push({ path: '/personnelInformation' })
    },
    onSearch() {},
    // 获取工资信息
    getWage() {
      let data = {
        orgId: sessionStorage.getItem('gatewayId'),
        teamId: sessionStorage.getItem('teamId'),
        wageMonth: this.yearMonth,
        projectId: sessionStorage.getItem('projectId')
      }
      queryTeamWage(data).then((res) => {
        if (res.data.data) {
          this.wageInfo = res.data.data
          this.wageInfo.teamPersonWageVOList.forEach((item) => {
            item.key = item.idNo
            if (item.contractType == '1') {
              item.contractType = '月薪'
            } else {
              item.contractType = '日薪'
            }

            item.inTime = moment(item.inTime).format('YYYY-MM-DD')
          })
          this.wageConfirmData = []
          this.payBankData = []
          this.wageInfo.certificatesVOList.forEach((item) => {
            if (item.type == 1) {
              this.wageConfirmData.push(item)
              // this.wageConfirm = item.fileName
              // this.wageConfirmUrl = item.fileUrl
            } else {
              this.payBankData.push(item)
              // this.payBank = item.fileName
              // this.payBankUrl = item.fileUrl
            }
          })
        } else {
          this.data = []
        }
      })
    },
    // 进入人员详情
    people_info(text) {
      // console.log(text)

      sessionStorage.setItem('orgPersonId', text.orgPersonId)

      let flag = sessionStorage.getItem('backstage')
      if (flag == 'true') {
        const { href } = this.$router.resolve({
          path: `/personnelInformationLabor/${text.orgPersonId}`,
          query: { id: text.orgPersonId }
        })

        window.open(href, '_blank')
      } else {
        this.$router.push({ path: '/personnelInformation' })
      }
    },
    //展示签字照片
    signShow(data) {
      this.signData = []
      data.forEach((item) => {
        this.signData.push(item.fileUrl)
      })
      this.visibleImg = true
    },
    //签字照片框确认
    handleOkImg() {
      this.visibleImg = false
    },
    // 手写签字照片框打开
    signImgClicksign(data) {
      this.signImgDatasign = data
      this.visibleImgsign = true
    },
     handleOkImgsign() {
      this.visibleImgsign = false
    },
    //手动录入时
    noImg() {
      this.$message.destroy()
      this.$message.error('工资为手动录入数据，无签字照片')
    },
   
  }
}
</script>

<style scoped>
div,
p,
span {
  font-family: 'Microsoft YaHei';
}
.breadCrumbBox {
  width: 100%;
  height: 40px;
  background-color: rgba(246, 248, 249, 1);
}
::v-deep .ant-breadcrumb > span:last-child {
  color: rgba(20, 146, 255, 1);
}
.salaryDetailsBox {
  width: 1200px;
  margin: auto;
  margin-top: 40px;
}
.salaryLogoBox {
  width: 140px;
  height: 140px;
}
.unitDetailsBox {
  width: 1020px;
}
.payrollTitle {
  color: #333333;
  font-size: 24px;
  font-weight: 400;
}
.payrollDetailBox {
  width: 100%;
  padding-bottom: 33px;
  background-color: #f5faff;
}
.payrollDetailBox > div {
  display: flex;
  justify-content: space-between;
}
.payrollDetailBox > div > span {
  font-size: 15px;
  color: #333;
  font-weight: 400;
  display: inline-block;
  flex: 1;
  /* width: 270px; */
  margin-top: 33px;
  margin-left: 30px;
}
.payrollBox {
  width: 1200px;
  margin: auto;
  margin-top: 70px;
}
.ant-table-header-column {
  color: red;
}
::v-deep .ant-modal {
  width: 1040px !important;
}

::v-deep .ant-modal-body {
  padding: 20px;
  padding-top: 50px;
}
.topInfoCell {
  margin: 33px 0 0 30px;
  flex: 1;
}
</style>
